<template>
  <div class="mySelf">
    <!-- 顶部标题 -->
    <div class="title">
      <div>我的</div>
      <div>
        <img src="../assets/images/goBack_left.png" alt="goBack_left" />
      </div>
    </div>

    <!-- 个人信息 -->
    <div class="persionalInfo">
      <div class="infoImg">
        <img src="../assets/images/headerimg.jpg" alt="头像" />
      </div>
      <div class="infoNickName">
        <div>人鱼线</div>
        <div>￥3</div>
      </div>
      <div class="infoTotal">
        <div class="left">
          <div>12.3</div>
          <div>总运动时间(H)</div>
        </div>
        <div class="middle">
          <div>1466K</div>
          <div>总消耗卡路里(CAL)</div>
        </div>
        <div class="middle">
          <div>15.6</div>
          <div>总运动路程(KM)</div>
        </div>
      </div>
    </div>

    <!-- 运动记录 -->
    <div class="sportInfo">
      <div class="sportTitle">
        <div>运动记录</div>
        <div class="boderLeft"></div>
      </div>
      <ul>
        <li>
          <div>周一</div>
          <div class="active"></div>
        </li>
        <li>
          <div>周二</div>
          <div></div>
        </li>
        <li>
          <div class="active">周三</div>
          <div></div>
        </li>
        <li>
          <div>周四</div>
          <div></div>
        </li>
        <li>
          <div>周五</div>
          <div class="active"></div>
        </li>
        <li>
          <div>周六</div>
          <div class="active"></div>
        </li>
        <li>
          <div>周日</div>
          <div class="active"></div>
        </li>
      </ul>
    </div>

    <!-- 每月排名 -->
    <div class="rankingMoths">
      <ul>
        <li>
          <div class="top">
            <div>每月排名</div>
            <div class="boderLeft"></div>
          </div>
          <div class="footer">24小时</div>
        </li>
        <li>
          <div class="mothsNum">20</div>
          <div>名</div>
        </li>
      </ul>
    </div>

    <!-- 每周排名 -->
    <div class="rankingWeeks">
      <ul>
        <li>
          <div class="top">
            <div>每周排名</div>
            <div class="boderLeft"></div>
          </div>
          <div class="footer">24小时</div>
        </li>
        <li>
          <div class="mothsNum">60</div>
          <div>分钟</div>
        </li>
      </ul>
    </div>

    <!-- 可视化数据图表 -->
    <div class="myEcharts">
      <div ref="chart" style="height: 400px"></div>
    </div>
  </div>
</template>

<script lang="ts">
// 引入生命钩子函数和 ref 响应式方法绑定数据图表
import { onMounted, ref } from "vue";
// 引入所有的echars可视化数据表
import * as echarts from "echarts";

export default {
  // 在 Vue 3 Composition API 的入口函数，用于组件的设置和初始化。
  setup() {
    const chart = ref(null);

    onMounted(() => {
      // 初始化 ECharts 实例
      const chartInstance = echarts.init(chart.value);

      // echas可视化数据图表的配置选项
      const option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          // bottom: '2%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: "category",
          data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          axisLabel: {
            color: "#ff0000",
            interval: 0,
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
        },
        // y轴
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#00ffff",
            fontSize: 14,
          },

          splitLine: {
            show: true,
            lineStyle: {
              width: 0.8,
              color: "rgba(127, 214, 255, .4)",
              type: "dashed",
            },
          },
        },
        // 线形渐变显示区
        series: [
          {
            type: "line",
            showSymbol: false,
            smooth: true,
            // symbolSize: 8,
            lineStyle: {
              color: "#10adcf",
            },
            itemStyle: {
              color: "#086ed9",
              borderColor: "#086ed9",
              borderWidth: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.25,
                    color: "#19354d33",
                  },
                  {
                    offset: 1,
                    color: "#19354d",
                  },
                ],
              },
            },
            data: [200, 1200, 1100, 900, 800, 1100, 1000],
          },
        ],
      };

      // 将配置选项应用到 ECharts 实例中，完成图表的绘制和设置
      chartInstance.setOption(option);
    });

    return { chart };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  list-style: none;
}

img {
  vertical-align: bottom;
}

.mySelf {
  background-color: #051338;

  .title {
    width: 100%;
    height: 60px;
    // background-color: aqua;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      &:nth-child(1) {
        color: white;
        font-weight: 700;
      }

      &:nth-child(2) {
        position: absolute;
        top: 50%;
        left: 2%;
        margin-top: -15px;

        img {
          width: 30px;
        }
      }
    }
  }

  .persionalInfo {
    // background-color: aqua;
    text-align: center;
    color: white;
    border-top: 1px solid gray;

    .infoImg {
      margin: 25px 0 15px 0;

      img {
        width: 90px;
        border-radius: 50%;
      }
    }

    .infoNickName {
      position: relative;
      margin: 10px 0 20px 0;

      div {
        box-sizing: border-box;

        &:nth-child(2) {
          position: absolute;
          top: 0;
          right: 50%;
          background-color: #f06822;
          border-radius: 9px;
          color: white;
          padding: 0 5px;
          margin-right: -65px;
        }
      }
    }

    .infoTotal {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 700;
      font-size: 24px;

      .left,
      .middle,
      .middle {
        margin: 15px 0 25px 0;

        div {
          &:nth-child(2) {
            color: gray;
            font-weight: 400;
            font-size: 12px;
          }
        }
      }
    }
  }

  .sportInfo {
    color: gray;
    padding: 15px 15px;
    border-top: 5px solid black;

    .sportTitle {
      // border-left: 2px solid #00b4e1;
      font-weight: 700;
      font-size: 18px;
      padding: 0 0 0 10px;
      position: relative;

      .boderLeft {
        width: 4px;
        height: 20px;
        background-color: #07b1e5;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -10px;
      }
    }

    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;

      li {
        margin: 10px 0 0 0;

        div {
          display: flex;
          justify-content: center;
          align-items: center;

          &:nth-child(2) {
            width: 20px;
            height: 20px;
            margin: 10px auto;
            // background: #07b1e5;
            border-radius: 50%;
            border: 1px solid gray;

            &.active {
              background: #07b1e5;
            }
          }
        }
      }
    }
  }

  .rankingMoths,
  .rankingWeeks {
    color: gray;
    padding: 10px 15px 0 15px;
    border-top: 5px solid black;
    border-bottom: 5px solid black;

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        margin: 0 0 10px 0;

        div {
          margin: 10px 0 0 0;
          text-align: center;
        }

        .top {
          position: relative;
          font-size: 18px;
          font-weight: 700;
          padding: 0 0 0 12px;

          .boderLeft {
            width: 5px;
            height: 20px;
            background: #07b1e5;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -10px;
          }
        }

        &:nth-child(2) {
          .mothsNum {
            color: white;
            font-size: 32px;
          }

          div {
            text-align: right;
          }
        }
      }
    }
  }

  .myEcharts {
    // background-color: white;
    padding: 30px 0 0 0;
  }
}
</style>
